<extend name="Base/common"/>
<block name="head_css">
<style>
    .menu{padding-left: 10px;margin-bottom: 40px;}
    .menu li{list-style: none;float: left;margin-left: 45px;margin-right: 60px;background-color:#E14C4B ;padding: 3px 5px 3px 5px; border-radius: 10px;margin-bottom: 20px;}
    .menu li a{color: white;}
    .son-on{background-color:#ae3034;text-decoration:underline;color:#ccc !important;}
</style>
</block>
<block name="banner">
    <div class="banner" style="background-image: url('/Public/Home/images/service.jpg') ">

    </div>
</block>
<block name="body">
    <div class="body" id="body">
        <div class="wrap">
            <!--面包屑-->
            <div class="box-crumbs">
                <div class="crumbs">

                </div>

                <b>服务项目</b>
                <span class="en">Service items</span>
            </div>
        </div>
        <div class="wrap">
            <div class="lef_menu">
                <ul id="menu">
                    <volist name="list" id="val">
                        <li>
                            <a <eq name="val.id" value="579">href="{:U('lists',array('id'=>$val['id']))}" target="myFrameName"</eq>  class="d_menu" onclick="c_menu(this);">
                                {$val.title}
                            </a>
                            <ul class="son_ul" style="display: none;">
                                <volist name="val['son']" id="val_son">
                                    <li class="son"><a data-id="{$val_son.id}" target="myFrameName" onclick="s_menu({$val_son.id},this)" class="s_menu" href="{:U('info',array('id'=>$val_son['id']))}">{$val_son.title}</a></li>
                                </volist>
                            </ul>
                        </li>
                    </volist>
                </ul>
            </div>
            <div class="page_content">
                <iframe  frameborder="0" scrolling="no" id="external-frame" name="myFrameName" onload="setIframeHeight(this)" name="myFrameName" style="width: 100%;min-height: 500px;"
                <if condition="empty($template['template'])">
                    src="{:U('Service/info',array('id'=>$id))}"
                    <else/>
                    src="{:U($template['template'],array('id'=>$template['id']))}"
                </if>
                >
                </iframe>
                <script>
                    function setIframeHeight(iframe) {
                        if (iframe) {
                            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                            if (iframeWin.document.body) {
                                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                            }
                        }
                    };

                    window.onload = function () {
                        setIframeHeight(document.getElementById('external-frame'));
                    };
                </script>
            </div>
        </div>
    </div>
</block>
<block name="footer_js">
    <script>
        $(function(){
            var template_id="{$template['id']}";
            if(template_id==""){
                var id={$id};
                $("#menu .d_menu").eq(0).addClass("on");
                $("#menu").find(".s_menu[data-id="+id+"]").addClass("son-on");
                crumbs(id);
            }else{

                $("#menu .d_menu").eq(1).addClass("on");
                crumbs(template_id);
            }

    });
        function c_menu(v){
            $(v).next("ul").slideToggle("slow");
        }
        function s_menu(id,v){
            $(".s_menu").removeClass("son-on");
            $(v).addClass("son-on");
            $(".d_menu").removeClass("on");
            $(v).parent().parent(".son_ul").prev(".d_menu").addClass("on");
            crumbs(id);
        }
        $(".d_menu").click(function(){
            $(".d_menu").removeClass("on");
            $(this).addClass("on");
        });
        function crumbs(id){
            $.get("{:U('place')}",{id:id},function(data){
                $(".crumbs").html(data);
            });
        }
    </script>
</block>